<script setup lang="ts">
import { getProjectDetail } from "@/api/research/project";
import { FileUpload } from "@/components/common/FileUpload";
import {
  dealDataExcept,
  formatDate,
  isCanPreview,
  numberToChinese
} from "@/utils/common";
import { ref, watch } from "vue";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    verticalProjectName: "",
    startDate: "",
    endDate: "",
    level: "",
    contractFiles: "",
    contractSignAddress: "",
    contractSignTime: "",
    finishFiles: "",
    projectType: 1,
    accountPrice: null,
    firstAccountPrice: null,
    firstAccountDate: null,
    secondAccountPrice: null,
    secondAccountDate: null,
    contractPrice: null,
    score: 0,
    examineStatus: 0,
    examineDesc: "",
    projectMasterName: ""
  }),
  dataId: null,
  userList: null
});

watch(
  () => props.dataId,
  async newValue => {
    if (!newValue) {
      return;
    }
    getProjectDetail({ id: newValue }).then(res => {
      newFormInline.value = res.data;
    });
  },
  { immediate: true }
);

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :inline="true"
    label-width="110px"
    class="add-form"
  >
    <el-form-item label="横向项目名称" prop="verticalProjectName">
      <div>{{ newFormInline.verticalProjectName || "--" }}</div>
    </el-form-item>
    <el-form-item label="项目负责人" prop="projectMasterName">
      <div>{{ newFormInline.projectMasterName || "--" }}</div>
    </el-form-item>
    <el-form-item label="甲方单位" prop="level">
      <div>{{ newFormInline.level || "--" }}</div>
    </el-form-item>
    <el-form-item label="合同金额" prop="contractPrice">
      <div>
        {{ dealDataExcept(newFormInline.contractPrice) || "--" }}
        <span v-if="newFormInline.contractPrice">万元</span>
      </div>
    </el-form-item>

    <div v-for="(item, index) in newFormInline.amountList" :key="index">
      <el-form-item :label="`第${numberToChinese(index + 1)}笔到账金额`">
        <div>
          {{ item.accountPrice || "--" }}
          <span v-if="item.accountPrice">万元</span>
        </div>
      </el-form-item>
      <el-form-item :label="`第${numberToChinese(index + 1)}笔到账时间`">
        <div>{{ formatDate(item.accountDate) }}</div>
      </el-form-item>
    </div>

    <el-form-item label="项目日期" prop="obtainDate">
      <div v-if="newFormInline.startDate">
        {{ formatDate(newFormInline.startDate) }} ~
        {{ formatDate(newFormInline.endDate) }}
      </div>
      <div v-else>--</div>
    </el-form-item>

    <el-form-item label="项目签订日期" prop="contractSignTime">
      <div>{{ formatDate(newFormInline.contractSignTime) }}</div>
    </el-form-item>

    <el-form-item label="合同签订地点" prop="contractSignAddress">
      <div>{{ newFormInline.contractSignAddress || "--" }}</div>
    </el-form-item>
    <el-form-item />
    <el-form-item label="结题报告附件" prop="contractFiles">
      <FileUpload
        v-model="newFormInline.finishFiles"
        :isCanPreview="isCanPreview(newFormInline, props.dataId)"
        disabled
      />
    </el-form-item>

    <el-form-item label="合同附件" prop="contractFiles">
      <FileUpload
        v-model="newFormInline.contractFiles"
        :isCanPreview="isCanPreview(newFormInline, props.dataId)"
        disabled
      />
    </el-form-item>

    <el-form-item label="获取积分" prop="score">
      <div>{{ newFormInline.score || "--" }}</div>
    </el-form-item>
    <el-form-item label="审核状态" prop="score">
      <el-tag v-if="newFormInline.examineStatus === 0" type="warning"
        >审核中</el-tag
      >
      <el-tag v-else-if="newFormInline.examineStatus === 1" type="primary"
        >已审核</el-tag
      >
      <el-tag v-else type="danger">已驳回</el-tag>
    </el-form-item>
    <el-form-item label="驳回原因" prop="score">
      <div>{{ newFormInline.examineDesc || "--" }}</div>
    </el-form-item>
    <el-form-item />
  </el-form>
</template>
